<template>
  <div 
    class="advanced-progress" 
    :class="`advanced-progress--${type}`"
  >
    <div 
      class="advanced-progress__outer"
      :style="outerStyle"
    >
      <div 
        class="advanced-progress__inner"
        :class="{
          'advanced-progress__inner--success': isFinished,
          'advanced-progress__inner--indeterminate': indeterminate
        }"
        :style="innerStyle"
      >
        <div 
          v-if="showText && !indeterminate" 
          class="advanced-progress__text"
          v-text="formatText(finalPercentage)"
        >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

defineOptions({
  name: 'AdvancedProgress'
})

const props = defineProps({
  percentage: {
    type: Number,
    default: 0,
    validator: (val) => val >= 0 && val <= 100
  },
  type: {
    type: String,
    default: 'line', // line, circle, dashboard
    validator: (value) => ['line', 'circle', 'dashboard'].includes(value)
  },
  strokeWidth: {
    type: Number,
    default: 6
  },
  textColor: {
    type: String,
    default: ''
  },
  color: {
    type: [String, Array, Function],
    default: ''
  },
  backgroundColor: {
    type: String,
    default: ''
  },
  showText: {
    type: Boolean,
    default: true
  },
  strokeLinecap: {
    type: String,
    default: 'round', // butt, round, square
    validator: (value) => ['butt', 'round', 'square'].includes(value)
  },
  format: {
    type: Function,
    default: null
  },
  indeterminate: {
    type: Boolean,
    default: false
  },
  duration: {
    type: Number,
    default: 3
  }
})

// 计算属性
const finalPercentage = computed(() => {
  if (props.percentage < 0) return 0
  if (props.percentage > 100) return 100
  return props.percentage
})

const isFinished = computed(() => finalPercentage.value === 100)

const finalColor = computed(() => {
  if (typeof props.color === 'function') {
    return props.color(finalPercentage.value)
  }
  if (typeof props.color === 'string') {
    return props.color
  }
  if (Array.isArray(props.color)) {
    // 数组格式: [{ percentage: 40, color: '#f56c6c' }, { percentage: 80, color: '#e6a23c' }]
    const sortedColors = props.color.sort((a, b) => a.percentage - b.percentage)
    for (let i = 0; i < sortedColors.length; i++) {
      if (finalPercentage.value <= sortedColors[i].percentage) {
        return sortedColors[i].color
      }
    }
    return sortedColors[sortedColors.length - 1]?.color || ''
  }
  return ''
})

const formatText = (percentage) => {
  if (props.format && typeof props.format === 'function') {
    return props.format(percentage)
  }
  return `${percentage}%`
}

const outerStyle = computed(() => {
  return {
    height: `${props.strokeWidth}px`,
    borderRadius: props.strokeLinecap === 'round' ? `${props.strokeWidth / 2}px` : '0',
    backgroundColor: props.backgroundColor || 'var(--color-gray-200)'
  }
})

const innerStyle = computed(() => {
  const style = {
    height: '100%',
    borderRadius: props.strokeLinecap === 'round' ? `${props.strokeWidth / 2}px` : '0',
    transition: props.indeterminate ? 'none' : 'width var(--transition-fast) ease',
    width: props.indeterminate ? '100%' : `${finalPercentage.value}%`
  }
  
  if (finalColor.value) {
    style.backgroundColor = finalColor.value
  } else {
    // 默认颜色
    if (finalPercentage.value < 30) {
      style.backgroundColor = 'var(--color-primary)'
    } else if (finalPercentage.value < 70) {
      style.backgroundColor = 'var(--color-warning)'
    } else {
      style.backgroundColor = 'var(--color-success)'
    }
  }
  
  // 文本颜色
  if (props.textColor) {
    style.color = props.textColor
  }
  
  // 不确定进度条动画
  if (props.indeterminate) {
    style.animation = `advanced-progress-indeterminate ${props.duration}s ease-in-out infinite`
  }
  
  return style
})
</script>

<style scoped>
.advanced-progress {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}

.advanced-progress__outer {
  position: relative;
  overflow: hidden;
}

.advanced-progress__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
}

.advanced-progress__inner--success {
  background-color: var(--color-success) !important;
}

.advanced-progress__inner--indeterminate {
  position: absolute;
  width: 100%;
  animation: advanced-progress-indeterminate 3s ease-in-out infinite;
}

.advanced-progress__text {
  margin-left: var(--spacing-small);
  font-size: var(--font-size-small);
  color: var(--color-text-primary);
  white-space: nowrap;
}

@keyframes advanced-progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .advanced-progress {
    gap: var(--spacing-extra-small);
  }
  
  .advanced-progress__text {
    font-size: var(--font-size-extra-small);
  }
}
</style>